<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
		.gone-enter-active{
			transition: 0.3s;
		}
		.gone-leave-actvie{
			transition: 0.8s cubic-bezier(1,0.5,0.5,1);
			/* 贝塞尔曲线,用于定义速度曲线 */
		/* (x1, y1, x2, y2)前面是第一个点坐标,后面是第二个点坐标 */
		}
		.gone-enter,.gone-leave-to{
			transform: translateX(100px);
			/* 用于元素的2D或者3D转换,这里指X轴移动了100px */
			opacity: 0;
		}
		</style>

		<title>vue过渡动画</title>
		<div id="app">
			<button @click="change">点我</button>
		
			<transition name="gone">
		
				<p v-if="show">测试2</p>
			</transition>
	
		</div>
	</head>
	<body>
		<script>
			new Vue({
				el:"#app",
				data:{
					show:true,//隐藏或者显示
				},
				methods:{
					change:function(){
						this.show=!this.show
					}
				}
			})
		</script>
	</body>
</html>
